<template>
    <div class="main">
        <div v-if="selectStartStop">
            <div class="fixed-section">
                <div class="head-title">
                    <div class="left-arrow" @click="onClickLeft"></div>
                    <span>{{$t('m.Searchstartbusstop')}}</span>
                </div>
                <div class="input-wraper">
                    <van-field
                        :placeholder="$t('m.Searchbusstoproadortownship')"
                        left-icon="search"
                        border
                        v-model="startStop"
                        @input="getNewData"
                        class="add-border"
                    />
                </div>
            </div>
            <div class="result-section">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    loading-text="Loading..."
                    @load="getList"
                >
                        <div class="data-wraper"
                             @click="backWithStart(item)"
                             v-for="(item, index) in tableData" :key="index">
                            <p class="stop-info" v-if="currentLang=='MM'">{{unicodeTozawgyi(item.nameMm)}} ({{unicodeTozawgyi(item.roadMm)}},{{unicodeTozawgyi(item.townshipMm)}})</p>
                            <p class="stop-info" v-else>{{item.nameEn}} ({{item.roadEn}},{{item.townshipEn}})</p>
                        </div>
                    <div class="no-data" v-if="finished">{{$t('m.Nomore')}}</div>
                </van-list>
            </div>
        </div>
        <div v-else>
            <div class="fixed-section">
                <div class="head-title">
                    <div class="left-arrow" @click="onClickLeft"></div>
                    <span>{{$t('m.Searchendbusstop')}}</span>
                </div>
                <div class="input-wraper">
                    <van-field
                        :placeholder="$t('m.Searchbusstoproadortownship')"
                        left-icon="search"
                        border
                        v-model="endStop"
                        @input="getNewData"
                        class="add-border"
                    />
                </div>
            </div>
            <div class="result-section">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    loading-text="Loading..."
                    @load="getList"
                >
                        <div class="data-wraper"
                             @click="backWithEnd(item)"
                             v-for="(item, index) in tableData" :key="index"
                        >
                            <p class="stop-info" v-if="currentLang=='MM'">{{unicodeTozawgyi(item.nameMm)}} ({{unicodeTozawgyi(item.roadMm)}},{{unicodeTozawgyi(item.townshipMm)}})</p>
                            <p class="stop-info" v-else>{{item.nameEn}} ({{item.roadEn}},{{item.townshipEn}})</p>
                        </div>
                    <div class="no-data" v-if="finished">{{$t('m.Nomore')}}</div>
                </van-list>
            </div>
        </div>
    </div>
</template>
<script>
    import {getBusStop} from '../../static/api/gc_api'

    export default {
        data() {
            return {
                startStop: '',
                endStop: '',
                //数字0是英文 数字1是缅文
                type: 0,
                sort: '',
                pageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
                pageInfo: {
                    totalCount: 0,
                    totalPages: 0
                },
                tableData: [],
                finished: false,
                loading: false,
                selectStartStop: true,
                currentLang: 'MM'
            }
        },
        methods: {
            //unicode转交集
            unicodeTozawgyi(value){
                if(value){
                    return this.$translateLang(value,'unicodeTozawgyi')||''
                }else{
                    return value;
                }
            },
            onClickLeft() {
                this.$router.go(-1)
            },
            getNewData() {
                this.tableData = []
                this.pageData.pageNum = 1;
                this.finished = false
                this.getList()
            },
            getList() {
                let searchForm = {};
                searchForm.sort = this.sort
                searchForm.pageNum = this.pageData.pageNum
                searchForm.pageSize = this.pageData.pageSize
                if (this.selectStartStop) {
                    //搜索的时候要把交集转化成unicode
                    searchForm.name = this.$translateLang(this.startStop||'','zawgyiTounicode')||''
                }
                else {
                    searchForm.name = this.$translateLang(this.endStop||'','zawgyiTounicode')||''
                }
                //根据语言环境决定type的值
                if(this.currentLang=='US'){
                    searchForm.type=0
                }
                else{
                    searchForm.type=1
                }
                this.loading = true
                getBusStop(searchForm)
                    .then(res => {
                        if (res.data.data.errorID == 0) {
                            let dataList = res.data.data.object.list || []
                            this.tableData = this.tableData.concat(dataList)
                            // 分页信息配置
                            this.pageInfo.totalPages = res.data.data.object.pages
                            this.pageInfo.totalCount = res.data.data.object.total
                            this.pageData.pageNum = this.pageData.pageNum + 1
                            if (this.pageData.pageNum > this.pageInfo.totalPages) {
                                this.finished = true
                            }
                            this.loading = false
                        }
                        else {
                            this.loading = false
                            this.$toast(res.data.data.message)
                            this.finished = true
                        }
                    })
                    .catch(err => {
                        console.log(err)
                        this.loading = false
                    })
            },
            backWithStart(item) {
                let startStopLangNameEn = item.nameEn + '(' + item.roadEn + ',' + item.townshipEn + ')'
                let startStopLangNameMm = item.nameMm + '(' + item.roadMm + ',' + item.townshipMm + ')'
                let startStopNameEn = item.nameEn
                let startStopNameMm = item.nameMm
                let startStopId = item.id
                let info = {
                    startStopLangNameEn,
                    startStopLangNameMm,
                    startStopNameEn,
                    startStopNameMm,
                    startStopId
                }
                localStorage.setItem("startStopInfo", JSON.stringify(info));
                this.$router.push({
                    path: '/ybs/ybs',
                })
            },
            backWithEnd(item) {
                let endStopLangNameEn = item.nameEn + '(' + item.roadEn + ',' + item.townshipEn + ')'
                let endStopLangNameMm = item.nameMm + '(' + item.roadMm + ',' + item.townshipMm + ')'
                let endStopNameEn = item.nameEn
                let endStopNameMm = item.nameMm
                let endStopId = item.id
                let info = {
                    endStopLangNameEn,
                    endStopLangNameMm,
                    endStopNameEn,
                    endStopNameMm,
                    endStopId
                }
                localStorage.setItem("endStopInfo", JSON.stringify(info));
                this.$router.push({
                    path: '/ybs/ybs',
                })
            },
        },
        mounted() {
            //判断是选择起始站还是终点站
            if (this.$route.query.selectStart == 1) {
                this.selectStartStop = true
            }
            else {
                this.selectStartStop = false
            }
            //获取本地存储里面的语言
            this.currentLang = window.localStorage.getItem('lang') || 'MM'
        }
    }
</script>
<style scoped>
    .main{
        font-family: Zawgyi-One, Heslvetica Neue,Helvetica,Arial,sans-serif !important;
    }
    .fixed-section {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        background: white;
    }
    .fixed-section .input-wraper{
        padding:10px;
        /*background:#83A6AA;*/
    }

    .add-border {
        border: solid 1px rgba(0, 0, 0, .3) !important;
        border-radius: 23px;
        font-size: 16px;
        background: rgba(99,99,99,.1);
    }

    .fixed-section .head-title {
        text-align: center;
        height: 46px;
        position: relative;
    }

    .fixed-section .head-title .left-arrow {
        position: absolute;
        width: 28px;
        height: 28px;
        background: url(../../static/img/leftArrow.png);
        background-size: cover;
        left: 5px;
        top: 9px;
    }

    .fixed-section .head-title span {
        font-size: 16px;
        font-weight: 500;
        line-height: 46px;
        color: black;
    }

    .result-section {
        padding: 115px 5px 0px 5px;
        background: rgba(99, 99, 99, .1);
    }


    .result-section .data-wraper {
        margin: 5px;
        background: white;
        border-radius: 5px;
        min-height: 32px;
        display: flex;
        align-items: center;
    }

    .result-section .data-wraper .stop-info {
        margin: 5px;
        word-break: break-all;
    }


    .no-data {
        text-align: center;
        font-size: 14px;
        line-height:32px;
        color: red;
    }
</style>
